<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>L'OCCITANE 欧舒丹</title>
	<link rel="stylesheet" href="../css/common.css">
	<link rel="stylesheet" href="../css/header.css">
	<link rel="stylesheet" href="../css/header2.css">
	<link rel="stylesheet" href="../css/index.css">
	<link rel="stylesheet" href="../css/bottom.css">
	<script src="../js/jquery-1.10.1.min.js"></script>
	<link rel="shortcut icon" href="../img/favicon.ico">
</head>
<body>
	<div class="wrap">
	<div class="top"></div>
	<div class="_header"></div>
	<div class="bg_banner">
		<div class="banner">
			<div class="pic">
					<ul class="swiper">
							<li><img src="../img/b1.jpg" alt=""></li>
							<li><img src="../img/b2.jpg" alt=""></li>
							<li><img src="../img/b3.jpg" alt=""></li>
							<li><img src="../img/b4.jpg" alt=""></li>
							<li><img src="../img/b5.jpg" alt=""></li>
							<li><img src="../img/b1.jpg" alt=""></li>
						</ul>
						<div class="menu">
							<li class="active"></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</div>
			</div>
		</div>
	</div>
	<div class="bg_box">
		<div class="box public">
			<ul>
				<li>
					<a href="goodlist.html?menu=1">
				<div class="img pullleft">
						<img src="../img/a1 (2).jpg" alt="">
					</div>
					<div class="title pullright">
						<img src="../img/a1.jpg" alt="">
						<p>马鞭草+樱花朱一龙同款套装</p>
						<p>￥360.00</p>
						<div>立即购买</div>
					</div>
					</a>
				</li>
				<li>
					<a href="goodlist.html?menu=1">
					<div class="img pullleft">
							<img src="../img/a1 (3).jpg" alt="">
						</div>
						<div class="title pullright">
							<img src="../img/a1 (4).jpg" alt="">
							<p>甜蜜樱花沐浴润肤套装</p>
							<p>￥440.00</p>
							<div>立即购买</div>
						</div>
					</a>	
				</li>
			</ul>
		</div>
	</div>	
	<div class="bg_goods">
		<div class="title">
          <img src="../img/title.jpg" alt="">
		</div>
			<div class="goods public">
				<ul class="g1">
					<li>
						<a href="goodlist.html?menu=1">
							<img src="../img/c1.jpg" alt="">
							<p>焕活微囊肌底精华液 </p>
							<p>￥520.00</p>
                            <div>立即购买</div>
						</a>
					</li>
					<li>
							<a href="goodlist.html?menu=1">
									<img src="../img/c2.jpg" alt="">
									<p>甜蜜樱花润肤乳 </p>
									<p>￥260.00</p>
									<div>立即购买</div>
							</a>
					</li>
					<li>
							<a href="goodlist.html?menu=1">
									<img src="../img/c3.jpg" alt="">
									<p>扁蜜桃精致沐浴油 </p>
									<p>￥450.00</p>
									<div>立即购买</div>
							</a>
					</li>
					<li>
							<a href="goodlist.html?menu=1">
									<img src="../img/c4.jpg" alt="">
									<p>5合1草本修护洗发露 </p>
									<p>￥190.00</p>
									<div>立即购买</div>
							</a>
					</li>
					<li>
							<a href="goodlist.html?menu=1">
									<img src="../img/c5.jpg" alt="">
									<p>玫瑰皇后沐浴套装 </p>
									<p>￥440.00</p>
									<div>立即购买</div>
							</a>
					</li>
					<li>
							<a href="goodlist.html?menu=1">
									<img src="../img/c6.jpg" alt="">
									<p>草本修护洗护套装 </p>
									<p>￥380.00</p>
									<div>立即购买</div>
							</a>
					</li>
					<li>
							<a href="goodlist.html?menu=1">
									<img src="../img/c7.jpg" alt="">
									<p>马鞭草朱一龙同款套装 </p>
									<p>￥360.00</p>
									<div>立即购买</div>
							</a>
					</li>
					<li>
							<a href="goodlist.html?menu=1">
									<img src="../img/c8.jpg" alt="">
									<p>马鞭草朱一龙同款套装 </p>
									<p>￥440.00</p>
									<div>立即购买</div>
							</a>
					</li>
				</ul>
				<div class="l1">
					<img src="../img/l_01_03.jpg" alt="">
				</div>
				<div class="r1">
					<img src="../img/l_01_05.jpg" alt="">
				</div>
			</div>
		</div>
	</div>
	<div class="bg_item">
		<div class="item public">
			<ul>
				<li><img src="../img/d1.jpg" alt="">
					<a href="goodlist.html?menu=1">
							<h2>限时礼遇</h2>
							<p>首单礼遇 满额赠礼 购物积分</p>
							<div>了解详情</div>
					</a>
			</li>
				<li><img src="../img/d2.jpg" alt="">
					<a href="goodlist.html?menu=1">
							<h2>精选套装</h2>
							<p>朱一龙同款限量礼盒</p>
							<div>了解详情</div>
					</a>
					</li>
				<li><img src="../img/d3.jpg" alt="">
					<a href="goodlist.html?menu=1">
							<h2>畅销星品</h2>
							<p>欧舒丹TOP星品榜单</p>
							<div>了解详情</div>
					</a>
					</li>
				</li>
				
			</ul>
		</div>
	</div>
	<div class="bg_club">
		<div class="club public">
         <img src="../img/e1.jpg" alt="">
		</div>
	</div>
	<div class="bg_see">
		<div class="see public">
			<div class="img pullleft"><img src="../img/e2.jpg" alt=""></div>
			<div class="box pullright">
				<h2>欧舒丹中国专柜</h2>
				<p>L'OCCITANE在全球有超过2000家店铺，提供温暖舒适的购物空间，让您感受普罗旺斯的温馨美好氛围。欢迎莅临中国大陆各专柜体验各式产品，并现场有专业指导人员提供咨询服务。</p>
			    <div><a href="goodlist.html?menu=1">查看门店地址</a></div>
			</div>
		</div>
	</div>
	<div class="bg_custom">
		<div class="custom public">
			<h2>顾客服务</h2>
			<div></div>
			<p>如需人工服务，请拨打普罗旺斯欧舒丹中国官方客服热线：4008-213-998</p>
			<p>服务时间：周一至周五，9:00am~6:00pm。法定节假日休息。</p>
			<p>或发送邮件至客服信箱：CS-Customers@loccitane.com</p>
		</div>
	</div>
	</div>
	<div class="bg_list">
		<div class="list public">
			<ul>
				<li><a href="goodlist.html?menu=1">L'OCCITANE基金会</a></li>
				<li><a href="goodlist.html?menu=1">L'OCCITANE全球网站</a></li>
				<li><a href="goodlist.html?menu=1">服务条款</a></li>
				<li><a href="goodlist.html?menu=1">隐私条款</a></li>
			</ul>
			<div> 沪公网安备 31010602002123号   ICP备案序号:沪ICP备09095206号-4号   普罗旺斯欧舒丹贸易（上海）有限公司 版权所有 @2017 2019</div>
		</div>
	</div>
	<div class="bg_bottom">
		<div class="bottom public"></div>
	</div>
</body>
<script>
	$("._header").load("header.html",function(){
		$.getScript("../js/header.js")
	})
	$(".bottom").load("bottom.html",function(){
		$.getScript("../js/bottom.js")
	})
	$(function () {

var index = 0;
var timer = null;

move();

function move() {
	clearInterval(timer);
	timer = setInterval(function () {
		index++;
		$(".swiper").animate({ left: -1920 * index }, 500, function () {
			if (index >= 5) {
				index = 0;
				$(".swiper").css({ left: 0 });

			}
			$(".menu li").eq(index).addClass("active").siblings().removeClass("active");
		})
	}, 2000);
}

$(".pic").hover(function () {
	clearInterval(timer);
}, function () {
	move();
})

$(".menu li").click(function () {
	index = $(this).index();
	$(".swiper").animate({ left: -1920 * index });
	$(".menu li").eq(index).addClass("active").siblings().removeClass("active");
})

var index2=1;
$(".goods .r1").click(function(){
if(index2<5){
	console.log(index2)
	$(".goods ul").stop().animate({left:-index2*300});
	index2++;
}
})

$(".goods .l1").click(function(){
if(index2>0){
	if(index2>=5){
		index2=index2-2
	}
	
	console.log(index2)
	$(".goods ul").stop().animate({left:index2*-300});
	index2--;
	if(index2<0){
		index2=0
	}
}

})
})

</script>
</html>